* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    width: 960px;
    height: auto;
    margin: 10px auto;
}

.row {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}


.row:after {
    clear: both;
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}

.col {
    float: left;
    width: 300px;
    height: 300px;
    margin: 10px;
    border: 1px solid #eeeeee; 
}

@keyframes transmigrate{
    0% {
        transform: rotate(0deg) scale(1)
    }
    50% {
        transform: rotate(180deg) scale(0.6)
    }
    100% {
        transform: rotate(360deg) scale(1)
    }
}

.transmigrate {
    position: relative;
}

.transmigrate .outer {
    width: 80px;
    height: 80px;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    top: 110px;
    left: 110px;
    animation: transmigrate 1s ease-in-out 0s infinite;
}

.transmigrate .inner {
    width: 46px;
    height: 46px;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    top: 126px;
    left: 126px;
    animation: transmigrate 1s ease-in-out 0.5s infinite reverse;
}

.transmigrate div.loading {
    border-color: transparent black;
}


@keyframes line{
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
    75% {
        transform: scale(1.25)
    }
    100% {
        transform: scale(0.75)
    }
}

.lines .line {
    float: left;
    height: 40px;
    width:4px;
    margin: 110px 10px;
    background: black;
}

.lines .line:first-child {
    margin-left: 89px;
    animation: line 1s linear 0s infinite;
}

.lines .line:first-child+.line {
    animation: line 1s linear 0.25s infinite;
}

.lines .line:first-child+.line+.line {
    animation: line 1s linear 0.5s infinite;
}

.lines .line:last-child {
    margin-right: 89px;
    animation: line 1s linear 0.75s infinite;
}
